<!DOCTYPE HTML>
<html>

<head>

    <title>LKBABY</title>
    <!-- 在网页标题左侧显示\在收藏夹显示图标 -->
    <link rel="icon" href="/images/icon/001.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/images/icon/002.ico" type="image/x-icon">
    <meta name="keywords" content="LKBaby">
    <meta name="description" content="LKBaby ">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="referrer" content="no-referrer"/>
    <link rel="stylesheet" href="/assets/css/main.css"/>
</head>

<body class="landing">
<div id="app">
    <div id="page-wrapper">

        <!-- Header -->
        <header id="header">
        </header>

        <!-- Banner -->
        <section id="banner">
            <div class="content">
                <header>
                    <h2 v-text="banner.title">lovekillingbaby</h2>
                    <p v-text="banner.firstDesc">邪王真眼是最强的！</p>
                    <p v-text="banner.secondDesc">啊，我的眼睛，眼睛……</p>
                </header>
                <span class="image"><img :src="banner.headImg" :alt="banner.headImgAlt"/></span>
            </div>
        </section>

        <!-- One -->
        <!-- <section id="one" class="spotlight style1 bottom">
            <span class="image fit main"><img src="images/pic001.jpg" alt="关于我们" /></span>
            <div class="content">
                <div class="container">
                </div>
            </div>
        </section> -->

        <!-- Two -->
        <section class="two"
                 v-for="(item,index) in content"
                 :key="item.id"
                 :class="item.id % 2 == 0 ? 'spotlight style3 left' : 'spotlight style2 right'"
                 :style="{backgroundImage: 'url('+ item.bgImg +')'}">
            <span class="image fit main bottom">
                <img :src="item.bgImg" :alt="item.bgImgAlt"/>
            </span>
            <div class="content">
                <header>
                    <h2 v-text="item.title">-ACG下载、互动小站</h2>
                    <p v-text="item.briefDesc">这个是！</p>
                </header>
                <p v-text="item.firstDesc">经常忘记更新！</p>
                <p v-text="item.secondDesc">其实！</p>
                <ul class="actions">
                    <li><a :onclick="'javascript:window.location.href=\'' + item.src + '\''" class="button">进入{{item.name}}</a></li>
                </ul>
            </div>
        </section>

        <!-- Five -->
        <section id="five" class="wrapper style2 special fade">
            <div class="container">
                <header>
                    <!-- 底部 -->
                </header>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer id="footer">
        <ul class="icons">
            <!-- <li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li> -->
        </ul>
        <ul class="copyright">
            <li>&copy; All rights reserved.</li>
        </ul>
    </footer>
</div>

<!-- Scripts -->
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/jquery.scrolly.min.js"></script>
<script src="/assets/js/jquery.dropotron.min.js"></script>
<script src="/assets/js/jquery.scrollex.min.js"></script>
<script src="/assets/js/skel.min.js"></script>
<script src="/assets/js/util.js"></script>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/vue.js"></script>

<script>

    var app = new Vue({
        el: "#app",
        data: {
            banner: {},
            content: [],
            bannerBGImg: new Image(),
            contentBGImg: []
        },
        created: function () {
            var that = this;
            // 初始化 banner
            $.get("/banner/queryBanner",
                function (data, status) {
                    if (data != null) {
                        that.banner = data;
                        // 缓存图片
                        that.bannerBGImg.src = that.banner.bgImg;
                        $("#banner").attr("style", 'background-image: url(\'' + that.banner.bgImg + '\');');
                    }
                });
            // 初始化 content
            $.get("/content/queryList",
                function (data, status) {
                    if (data != null) {
                        that.content = data;
                        // 缓存图片
                        for (var i = 0; i < data.length; i++) {
                            var img = new Image();
                            img.src = data[i].bgImg;
                            that.contentBGImg.push({
                                id: data[i].id,
                                img: img
                            });
                        }
                    }
                });
        }
    });

</script>

</body>